<template>
  <div class="fulltable">
    <div class="full">
      <div class="search-box">

        <el-input  
          v-model="searchQuery"  
          placeholder="搜索标题"  
          clearable  
          style="width:200px;margin-right: 10px;"  
        ></el-input>  

        <el-select v-model="selectedStatus" placeholder="筛选状态" clearable style="margin-right: 10px;"  >  
          <el-option  
            v-for="status in selectstateOptions"  
            :key="status.value"  
            :label="status.label"  
            :value="status.value"  
          ></el-option>  
        </el-select>  

        <el-select v-model="selectedType" placeholder="筛选类型" clearable style="width:200px;margin-right: 10px;"  >  
          <el-option  
            v-for="type in typeOptions"  
            :key="type.value"  
            :label="type.label"  
            :value="type.value"  
          ></el-option>  
        </el-select>
        <el-button type="primary" @click="filterReadStatus('all')">全部</el-button>
        <el-button type="success" @click="filterReadStatus(true)">已读</el-button>
        <el-button type="warning" @click="filterReadStatus(false)" style="margin-right: 10px;">未读</el-button>

      </div>  
      <el-table
        :data="filteredNoticeData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"  
        :height="tableHeight"
        border
        style="width: 100%">
        <el-table-column
          prop="type"
          label="类型"
          width="100">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="100">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="200">
        </el-table-column>
        <el-table-column
          prop="releasetime"
          label="发布时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="releaseperson"
          label="发布人"
          width="140">
        </el-table-column>
        <el-table-column
          prop="dept"
          label="部门"
          width="140">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-badge v-if="!scope.row.isRead" is-dot>
              <el-button type="primary" size="small" @click="viewItem(scope.row)">详情</el-button>
            </el-badge>
            <el-button v-else type="primary" size="small" @click="viewItem(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination  
          @size-change="handleSizeChange"  
          @current-change="handleCurrentChange"  
          :current-page="currentPage"  
          :page-sizes="[5,10, 20, 40, 60]"  
          :page-size="pageSize"  
          :pager-count="4"
          layout="total, sizes, prev, pager, next, jumper"  
          :total="filteredNoticeData.length">  
        </el-pagination> 
      </div>
    </div>
    <el-dialog title="通知公告详情" :visible.sync="showDetailModal" width="50%">  
      <el-form :model="detailItem" label-width="80px">  
        <el-form-item label="类型">  
          <el-input v-model="detailItem.type" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="状态">  
          <el-input v-model="detailItem.state" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="标题">  
          <el-input v-model="detailItem.title" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="描述">  
          <el-input type="textarea" v-model="detailItem.desc" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="发布时间">  
          <el-input v-model="detailItem.releasetime" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="发起人">  
          <el-input v-model="detailItem.releaseperson" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="部门">  
          <el-input v-model="detailItem.dept" disabled></el-input>  
        </el-form-item>   
        <el-form-item>
          <el-button type="primary" @click="handleLinkClick(detailItem)">查看链接</el-button>
        </el-form-item>
      </el-form>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="handleCancelDetail">取 消</el-button>  
      </span>  
    </el-dialog>
    <!-- //请假信息 -->
<el-dialog title="假期申请详情" :visible.sync="showVacationDetailModal" width="50%">  
  <el-form :model="vDetailItem" label-width="80px">  
    <el-form-item label="申请人">  
      <el-input v-model="vDetailItem.name" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="状态">  
      <el-input v-model="vDetailItem.state" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="类型">  
      <el-input v-model="vDetailItem.type" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="开始时间">  
      <el-input v-model="vDetailItem.starttime" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="结束时间">  
      <el-input v-model="vDetailItem.deadline" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="原因">  
      <el-input type="textarea" v-model="vDetailItem.reason" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="申请时间">  
      <el-input v-model="vDetailItem.time" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="审核状态">  
      <el-input v-model="vDetailItem.examine" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="审核人">  
      <el-input v-model="vDetailItem.reviewer" disabled></el-input>  
    </el-form-item>  
        <el-form-item label="审核原因">  
      <el-input v-model="vDetailItem.exreason" disabled></el-input>  
    </el-form-item>  
  </el-form>  
  <span slot="footer" class="dialog-footer">  
    <el-button @click="showVacationDetailModal = false">取 消</el-button>  
  </span>  
</el-dialog>
<!-- 通知信息 -->
    <el-dialog title="通知公告详情" :visible.sync="showNoticeDetailModal" width="50%">  
      <el-form :model="tDetailItem" label-width="80px">  
        <el-form-item label="类型">  
          <el-input v-model="tDetailItem.type" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="状态">  
          <el-input v-model="tDetailItem.state" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="标题">  
          <el-input v-model="tDetailItem.title" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="描述">  
          <el-input type="textarea" v-model="tDetailItem.desc" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="发布时间">  
          <el-input v-model="tDetailItem.releasetime" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="发起人">  
          <el-input v-model="tDetailItem.releaseperson" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="部门">  
          <el-input v-model="tDetailItem.dept" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="接收人">  
          <el-input v-model="tDetailItem.recipient" disabled></el-input>  
        </el-form-item>  
        <el-form-item label="审核人">  
          <el-input v-model="tDetailItem.reviewer" disabled></el-input>  
        </el-form-item>
        <el-form-item label="审核状态">
          <el-input v-model="tDetailItem.examine" disabled></el-input>  
        </el-form-item>
        <el-form-item label="审核原因">
          <el-input v-model="tDetailItem.exReason" disabled></el-input>  
        </el-form-item>  
      </el-form>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="showNoticeDetailModal = false">取 消</el-button>  
      </span>  
    </el-dialog>  
    <!-- //任务信息 -->
<el-dialog title="任务详情" :visible.sync="showTaskDetailDialog" width="50%">  
  <el-form :model="selectedTask" label-width="80px">  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="任务类型">  
          <el-input v-model="selectedTask.type" disabled></el-input>  
        </el-form-item>  
      </el-col>  
      <el-col :span="12">  
        <el-form-item label="任务标题">  
          <el-input v-model="selectedTask.title" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="优先级">  
          <el-input v-model="selectedTask.priority" disabled></el-input>  
        </el-form-item>  
      </el-col>   
      <el-col :span="12">  
        <el-form-item label="开始时间">  
          <el-input v-model="selectedTask.starttime" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="结束时间">  
          <el-input v-model="selectedTask.deadline" disabled></el-input>  
        </el-form-item>  
      </el-col>  
      <el-col :span="12">  
        <el-form-item label="发起人">  
          <el-input v-model="selectedTask.promoter" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="部门">  
          <el-input v-model="selectedTask.deptname" disabled></el-input>  
        </el-form-item>  
      </el-col>  
      <el-col :span="12">  
        <el-form-item label="负责人">  
          <el-input v-model="selectedTask.charge" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="任务描述">  
          <el-input type="textarea" v-model="selectedTask.desc" disabled></el-input>  
        </el-form-item>  
      </el-col>  
      <el-col :span="12">  
        <el-form-item label="接收人">  
          <el-input type="textarea" v-model="selectedTask.recipient" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="状态">  
          <el-input v-model="selectedTask.state" disabled></el-input>  
        </el-form-item>  
      </el-col>  
     <el-col :span="12">  
        <el-form-item label="审核人">  
          <el-input v-model="selectedTask.reviewer" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
    <el-row>  
      <el-col :span="12">  
        <el-form-item label="评价">  
          <el-input type="textarea" v-model="selectedTask.evaluate" disabled></el-input>  
        </el-form-item>  
      </el-col>  
            <el-col :span="12">  
        <el-form-item label="审核原因">  
          <el-input type="textarea" v-model="selectedTask.exreason" disabled></el-input>  
        </el-form-item>  
      </el-col>  
    </el-row>  
  </el-form>  
  <div slot="footer" class="dialog-footer">  
    <el-button @click="showTaskDetailDialog = false">取 消</el-button>  
  </div>  
</el-dialog> 
 <!-- 查看详情弹窗 -->  
 <el-dialog title="日程详情" :visible.sync="showScheduleDetailModal" width="60%">  
      <el-form :model="scheDetailItem" label-width="80px">  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="类型">  
              <el-input v-model="scheDetailItem.type" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="状态">  
              <el-input v-model="scheDetailItem.state" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="标题">  
              <el-input v-model="scheDetailItem.title" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="描述">  
              <el-input v-model="scheDetailItem.desc" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="开始时间">  
              <el-input v-model="scheDetailItem.starttime" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="结束时间">  
              <el-input v-model="scheDetailItem.deadline" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="发起人">  
              <el-input v-model="scheDetailItem.promoter" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="部门">  
              <el-input v-model="scheDetailItem.deptname" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
            <el-col :span="12">  
            <el-form-item label="会议室">  
              <el-input v-model="scheDetailItem.boardroom" disabled></el-input>  
            </el-form-item>  
          </el-col> 
          <el-col :span="12">  
            <el-form-item label="接收人">  
              <el-input type="textarea" v-model="scheDetailItem.recipient" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
      </el-form>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="showScheduleDetailModal = false">取 消</el-button>  
      </span>  
    </el-dialog>  
  </div>
</template>

<script>
import { getMyNoticeList, getNoticeDetailById, readNotice } from '@/api/notice';
import { getVacationDetailById } from '@/api/vacation';
import { getTaskDetailById } from '@/api/task';
import {getScheduleDetailById} from '@/api/schedule';
import {addLog} from '@/api/log';
export default {
  data() {
    return {  
      logItem:{
              mn:'',
              opn:'',
              res:''
      },
      noticeData: [],  
      currentPage: 1,  
      pageSize: 5,  
      tableHeight: 300,  
      maxTableHeight: 700,  
      minTableHeight: 300,  
      showDetailModal: false,  
      showVacationDetailModal: false,
      showNoticeDetailModal: false,
      showTaskDetailDialog: false,
      showScheduleDetailModal:false,
      detailItem: {},  
      vDetailItem: {},
      tDetailItem: {},
      scheDetailItem:{},
      selectedTask: {},
      selectstateOptions: [  
        { label: '一般', value: '一般' },  
        { label: '重要', value: '重要' },  
        { label: '紧急', value: '紧急' }  
      ],  
      typeOptions: [  
        { label: '公告', value: '公告' },  
        { label: '通知', value: '通知' },  
        { label: '更新', value: '更新' },  
      ],  
      searchQuery: '', // 新增：搜索标题  
      selectedStatus: '', // 新增：筛选状态  
      selectedType: '', // 新增：筛选类型  
      readStatusFilter: 'all' // 新增：筛选已读/未读状态
    }  
  },
  computed: {  
    filteredNoticeData() {  
      return this.noticeData.filter(item => {  
        const matchesTitle = item.title.toLowerCase().includes(this.searchQuery.toLowerCase());  
        const matchesStatus = this.selectedStatus ? item.state === this.selectedStatus : true; // 状态筛选  
        const matchesType = this.selectedType ? item.type === this.selectedType : true; // 类型筛选  
        const matchesReadStatus = this.readStatusFilter === 'all' || item.isRead === this.readStatusFilter; // 已读/未读筛选
        return matchesTitle && matchesStatus && matchesType && matchesReadStatus;  
      });  
    }  
  },
  created() {
    getMyNoticeList().then(response => {  
      this.noticeData = response.data;  
      this.calculateTableHeight();  
      console.log(response.data);  
    }).catch(error => {  
      console.log(error);  
      this.tableHeight = this.minTableHeight;  
    }); 
  },
  watch:{
  currentPage() {  
    this.calculateTableHeight()  
  },  
  pageSize() {  
    this.calculateTableHeight()  
  }
  },
  methods: {
// ... existing code ...
handleLinkClick(item) {
  console.log("item",item);
  if (item.linkType === 'vacation') {
    // 调用 attendance 中的查看假期申请详情方法
      getVacationDetailById(item.linkId).then((response)=>{
      this.showVacationDetailModal = true; // 显示详情弹窗  
      this.vDetailItem = response.data;
      console.log(response.data);
      this.logItem.mn = "handleLinkClick";
      this.logItem.opn = "通知详情中查看假期申请详情链接";
      this.logItem.res = "true";
      addLog(this.logItem);
      })
  } else if (item.linkType === 'task') {
    getTaskDetailById(item.linkId).then((response)=>{
      this.selectedTask = response.data;
      console.log("任务",response.data);
      this.logItem.mn = "handleLinkClick";
      this.logItem.opn = "通知详情中查看任务详情链接";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.showTaskDetailDialog = true; // 显示详情弹窗
    })
    // 调用 task 中的查看详情方法
  } else if (item.linkType === 'notice') {
    // 调用 notice 中的查看公告详情方法
    getNoticeDetailById(item.linkId).then((response) => {
      this.tDetailItem = response.data;
      console.log("公告",response.data);
      this.logItem.mn = "handleLinkClick";
      this.logItem.opn = "通知详情中查看公告详情链接";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.showNoticeDetailModal = true; // 显示详情弹窗
    }).catch(() => {
      this.$message.info('查看公告消息失败');
    });
  }else if(item.linkType === 'schedule'){
    getScheduleDetailById(item.linkId).then((response)=>{
      this.scheDetailItem = response.data;
      console.log("日程",response.data);
      this.logItem.mn = "handleLinkClick";
      this.logItem.opn = "通知详情中查看日程详情链接";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.showScheduleDetailModal = true;
    }).catch(()=>{
      this.logItem.mn = "handleLinkClick";
      this.logItem.opn = "通知详情中查看链接";
      this.logItem.res = "false";
      addLog(this.logItem);
      this.$message.info('查看公告消息失败');
    })
  }else{
    this.logItem.mn = "handleLinkClick";
    this.logItem.opn = "通知详情中查看链接";
    this.logItem.res = "false";
    addLog(this.logItem);
    this.$message.error('查看公告无链接');
  }
},
// ... existing code ...
    filterReadStatus(status) {
      this.readStatusFilter = status;
      this.logItem.mn = "filterReadStatus";
      if(status === 'all'){
        this.logItem.opn = "筛选全部状态-通知列表";
      }else if(status === true){
        this.logItem.opn = "筛选已读状态-通知列表";
      }else if(status === false){
        this.logItem.opn = "筛选未读状态-通知列表";
      }
      this.logItem.res = "true";
      addLog(this.logItem);
    },
    handleCancelDetail() {
      this.showDetailModal = false;
      getMyNoticeList().then(response => {  
        this.noticeData = response.data;  
        this.calculateTableHeight();  
        console.log(response.data);  
      }).catch(error => {  
        console.log(error);  
        this.tableHeight = this.minTableHeight;  
      }); 
    },
    handleSizeChange(val) {  
      this.pageSize = val;  
      this.currentPage = 1;  
      this.logItem.mn = "handleSizeChange";
      this.logItem.opn = "改变每页显示的通知数量-通知列表";
      this.logItem.res = "true";
      addLog(this.logItem);
    },  
    handleCurrentChange(val) {  
      this.currentPage = val;  
      this.logItem.mn = "handleCurrentChange";
      this.logItem.opn = "改变页码-通知列表";
      this.logItem.res = "true";
      addLog(this.logItem);
    },  
    calculateTableHeight() {  
      const currentPageData = this.noticeData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);  
      let height = (currentPageData.length + 1) * 60 
      this.tableHeight = Math.max(this.minTableHeight, Math.min(height, this.maxTableHeight))  
    },
    viewItem(row) {  
      if(!row.isRead){
        readNotice(row.id);
      }
  // 这里假设 row 已经包含了完整的通知公告信息  
  getNoticeDetailById(row.id).then((response)=>{
    this.detailItem = response.data
    this.logItem.mn = "viewItem";
    this.logItem.opn = "查看公告详情-通知列表";
    this.logItem.res = "true";
    addLog(this.logItem);
    console.log(response.data)
  this.showDetailModal = true; // 显示详情弹窗  
  }).catch(()=>{
    this.$message.info('查看公告消息失败');  
    this.logItem.mn = "viewItem";
    this.logItem.opn = "查看公告详情-通知列表";
    this.logItem.res = "false";
    addLog(this.logItem);
  })
},     
  } 
}
</script>

<style lang="less" scoped>
.fulltable{
  margin-top: 20px;
  height: 700px;

}
.full{
  height: 800px;
  margin: 0;
  padding: 0;
  background: pink;
  padding-top:10px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 10px;
  flex: 1;
}
.add{
  padding: 10px;
}
/deep/.el-table .cell {  
  color: black;
}  

.paging{
  margin: 0;
  padding: 0;
  padding-top:10px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 10px;
  flex: 1;

  /deep/ .el-pagination {
    display: flex;  
    justify-content: flex-end;  
  }
}
/deep/.el-badge__content.is-fixed.is-dot{
  top: 10px!important;
  right: 17px!important;
}
/deep/.el-badge__content.is-dot{
  height: 5px!important;
  width: 5px!important;
}
</style>